<template>
  <div
    class="editor-containe flex bg-[#E5E5E5] flex-row md:flex-col w-full min-h-[42px] py-[6px] md:py-0"
  >
    <!-- PC端工具栏 -->
    <div
      class="toolbar w-full px-[8px] bg-white hidden md:flex flex-row justify-end items-center border-b-[1px] border-gray-100"
    >
      <!-- 转人工图标 -->
      <div class="runAging">
        <svg
          class="w-[26px] h-26px cursor-pointer fill-primary"
          t="1735119183194"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6107"
        >
          <path
            d="M516.1 770.9c4.4 0 8.8-0.3 13.3-0.8 43-5.2 79.5-35.2 93-76.7 1-3.1-0.5-6.4-3.4-7.8-2.9-1.4-6.5-0.2-8.1 2.6-0.2 0.3-17.2 27.9-83.8 36.9-10 1.3-19.6 2-28.8 2-46.6 0-67.4-17.6-67.6-17.8-2.3-2.1-5.9-2.1-8.3-0.1-2.4 2-3 5.6-1.3 8.3 20.2 32.9 56.6 53.4 95 53.4z m357.7-412.3c-0.6 0-1.1 0.1-1.7 0.1C833.2 189.9 684.2 64 505.6 64 322.1 64 169.8 196.8 136 372.6c-32.8 5.9-57.8 34.8-57.8 69.7V582c0 39.2 31.4 70.9 70.2 70.9 21.9 0 41.2-10.3 54-26.2 31 82.1 94.2 148.2 174.1 183.1 0.2-0.4 1.7-3.4 3.5-5.7 1.3-1.6 2.7-3 3.9-3 1.3 0 2.4 0.5 3.4 1.2-18.5-13.8-85.3-84.6-99.8-183.4-6.4-43.5 26.2-86.2 64.2-93.2 60.9-11.3 121.5-24.3 182.4-35.4 38.7-7.1 65.2-28.3 81.4-63.7 3.8-8.3 9.3-25 11.8-49.1 0.7-3.6 3.6-6.3 7.4-6.3 2.5 0 4.6 1.3 6.1 3.1l1.7-1c24 34.9 71.6 112 78.4 193.4 7.8 93 3.5 156.7-67.7 221.9l-0.3 0.3c-1 1.1-1.6 2.5-1.6 4 0 2 1.1 3.7 2.6 4.8 0.6 0.2 1.2 0.6 1.8 0.8 0.5 0.1 0.9 0.3 1.4 0.3 0.5 0 0.9-0.2 1.3-0.3 1-0.5 2-1.2 3-1.7 72-39.7 127.2-105.9 152.8-185.6 10.3 15.4 26.5 26.4 45.3 30.2-30.1 137.1-152.4 222.9-303.9 235.9-9.1-22.5-31.4-38.5-57.7-38.5-34.3 0-62.1 27.1-62.1 60.6s27.8 60.6 62.1 60.6c27.6 0 50.8-17.8 58.8-42.2C732.1 903.5 872.6 799.3 902 637.4c25.9-10.8 44.1-36.3 44.1-66V430c-0.2-39.4-32.5-71.4-72.3-71.4z m-64.7 40.6c-45.7-123.9-164.2-212.4-303.7-212.4-138.8 0-256.9 87.8-303.1 210.8-2.3-2.8-5-5.2-7.6-7.6 26.1-150 155.2-264 310.9-264 154.9 0 283.6 112.9 310.6 261.9-2.7 3.5-5.1 7.2-7.1 11.3zM376.4 809.8c0 0.1 0 0.1 0 0z"
            p-id="6108"
          ></path>
        </svg>
      </div>
    </div>
    <!-- 移动端 -->
    <div class="w-full flex flex-row justify-between items-end px-2 md:px-0">
      <!-- 移动端转人工图标 -->
      <template v-if="agentIconShow">
        <online-customer-service></online-customer-service>
      </template>

      <!-- PC输入框 -->
      <div
        class="border-[1px] md:flex hidden rounded-full md:rounded-none border-[#ccc] md:border-none overflow-hidden basis-full box-content h-[32px] md:h-[120px] justify-center items-center"
      >
        <Editor v-model="inputText" />
      </div>
      <!-- 移动端输入框 -->
      <custom-input ref="comment"></custom-input>
      <!-- 移动端表情 -->
      <div
        class="mr-1 md:hidden h-[32px] flex justify-center items-center"
        data-type="emoji"
        @click="openEmoji"
      >
        <svg
          t="1736321512252"
          data-type="emoji"
          class="w-[26px] h-[26px] cursor-pointer fill-primary"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5347"
        >
          <path
            data-type="emoji"
            d="M522.24 1021.952C245.76 1021.952 20.48 796.672 20.48 520.192S245.76 18.432 522.24 18.432 1024 243.712 1024 520.192 798.72 1021.952 522.24 1021.952z m0-942.08C278.528 79.872 81.92 278.528 81.92 520.192c0 243.712 196.608 440.32 440.32 440.32S962.56 763.904 962.56 520.192c0-241.664-196.608-440.32-440.32-440.32z"
            p-id="5348"
          ></path>
          <path
            data-type="emoji"
            d="M350.208 370.688m-79.872 0a79.872 79.872 0 1 0 159.744 0 79.872 79.872 0 1 0-159.744 0Z"
            p-id="5349"
          ></path>
          <path
            data-type="emoji"
            d="M696.32 370.688m-79.872 0a79.872 79.872 0 1 0 159.744 0 79.872 79.872 0 1 0-159.744 0Z"
            p-id="5350"
          ></path>
          <path
            data-type="emoji"
            d="M522.24 864.256c-178.176 0-323.584-139.264-323.584-311.296v-30.72h645.12V552.96c2.048 172.032-143.36 311.296-321.536 311.296zM262.144 585.728c16.384 122.88 126.976 219.136 260.096 219.136s243.712-96.256 260.096-219.136H262.144z"
            p-id="5351"
          ></path>
        </svg>
      </div>
      <!-- 移动端文件 -->
      <div
        class="mr-1 md:hidden h-[32px] flex justify-center items-center"
        data-type="file"
        @click="openFile"
      >
        <svg
          t="1736322152474"
          data-type="file"
          class="w-[26px] h-[26px] cursor-pointer fill-primary"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="18952"
          width="200"
          height="200"
        >
          <path
            data-type="file"
            d="M851.643564 481.584158H542.415842V172.356436a30.415842 30.415842 0 0 0-60.831684 0v309.227722H172.356436a30.415842 30.415842 0 0 0 0 60.831684h309.227722V851.643564a30.415842 30.415842 0 0 0 60.831684 0V542.415842H851.643564a30.415842 30.415842 0 0 0 0-60.831684z"
            p-id="18953"
          ></path>
          <path
            data-type="file"
            d="M512 0A512 512 0 1 0 1024 512 512.506931 512.506931 0 0 0 512 0z m0 963.168317A451.168317 451.168317 0 1 1 963.168317 512 451.675248 451.675248 0 0 1 512 963.168317z"
            p-id="18954"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {computed, ref, watch} from 'vue'
  import CustomInput from "@/components/Mobile/CustomInput.vue";
  import Editor from "@/components/Editor.vue";
  import OnlineCustomerService from "@/components/Mobile/OnlineCustomerService.vue";
  const emits = defineEmits(['emoji', 'file'])
  import { useSessionStore } from '@/store/session'
import {FAction} from '@/plugins/constants.ts'
import {useChannelStore} from "@/store/channel.ts";
  const session = useSessionStore()
const channel = useChannelStore()
const comment = ref()
  const inputText = ref({
    html: '',
    content: '',
  })
  function insetEmoji(newVal) {
    comment.value.updateInsetText(newVal)
  }
  // 转人工图标控制变量
  const agentIconShow = computed(() => {
    return channel.SystemInfo.openTurnLabor && (session.FAction === FAction.INIT || session.FAction === FAction.ROBOT || session.FAction === FAction.DESTROY || session.FAction === FAction.DESTROY_ROBOT || session.FAction === FAction.CANCEL_QUEUE);
  })
  defineExpose({
    insetEmoji,
  })
  watch(
    () => inputText.value,
    (newVal) => {
      console.log('newVal', newVal)
    },
  )

  const emojiState = ref(false)
  function openEmoji() {
    emojiState.value = !emojiState.value
    emits('emoji', emojiState.value)
  }
  const fileState = ref(false)
  function openFile() {
    fileState.value = !fileState.value
    emits('file', fileState.value)
  }
</script>
<style lang="less" scoped></style>
